<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层次选择器</title>
		<style>
			/*后代选择器*/
			.box p{
				color:plum;
				
			}
			/*父子选择器*/
			.box>p{
				background-color: lightgoldenrodyellow;
			}
			/*相邻选择器*/
			#p1+p{
				/*字体大小*/
				font-size: 30px;
			}
			/*兄弟选择器*/
			#p1~p{
				/*文字右对齐*/
				text-align: right;
			}
		</style>
	</head>
	<body>
		<!--层次选择器：
			1.后代选择器：父元素 后代元素{}
			2.父子选择器(div下的子p加背景颜色)：父元素>子元素{}
            3.相邻选择器
                                          元素A+元素B{}
            4.兄弟选择器
                                          元素A~元素B{s}
        -->
		<div class="box">
			<h3>无题</h3>
		<p id="p1">向晚意不适</p>
		<p>驱车登古原</p>
        <p>夕阳无限好</p>
        <p>只是近黄昏</p>
        <span>
        	111<p>成也风云，败也风云</p>111
        </span>
        
        <p>作者:马荣成</p>
        </div>
	</body>
</html>
